<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-title">消息中心</view>
      <view class="nav-right" @click="goToSettings">
        <uni-icons type="setting" size="22" color="#666"></uni-icons>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 消息列表 -->
      <view class="message-list">
        <view 
          class="message-item" 
          v-for="(item, index) in messageList" 
          :key="index"
          @click="goToChat(item.userId, item.nickname)"
        >
          <!-- 用户头像 -->
          <view class="avatar">
            <image :src="item.avatar" mode="aspectFill"></image>
            <!-- 未读消息数量 -->
            <view class="unread-badge" v-if="item.unreadCount > 0">
              {{ item.unreadCount }}
            </view>
          </view>
          
          <!-- 消息内容 -->
          <view class="message-content">
            <view class="message-header">
              <view class="nickname">{{ item.nickname }}</view>
              <view class="time">{{ item.time }}</view>
            </view>
            <view class="message-text">{{ item.lastMessage }}</view>
          </view>
          
          <!-- 在线状态 -->
          <view class="online-status" v-if="item.isOnline"></view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="messageList.length === 0">
        <uni-icons type="message" size="60" color="#ccc"></uni-icons>
        <view class="empty-text">暂无消息</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: [{
		  userId:1,
		  avatar:'https://picsum.photos/id/237/800/300',
		  nickname:'测试',
		  isOnline:true,
		  time:'2024-01-01',
		  unreadCount:100,
		  lastMessage:'dd'
	  },
	  {
		  userId:2,
		  avatar:'http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
		  nickname:'测试',
		  isOnline:true,
		  time:'2024-01-01',
		  unreadCount:10,
		  lastMessage:'dd'
	  }
	  ]
    }
  },
  
  onLoad() {
    this.loadMessageList()
  },
  
  onShow() {
    this.loadMessageList()
  },
  
  methods: {
    // 加载消息列表
    async loadMessageList() {
      if (!this.$store.state.user.isLogin) {
        return
      }
      
      try {
        const res = await this.$api.getMessageList()
        
        if (res.code === 200) {
          this.messageList = res.data
        }
      } catch (error) {
        console.error('加载消息列表失败', error)
        uni.showToast({
          title: '加载失败，请稍后重试',
          icon: 'none'
        })
      }
    },
    
    // 跳转到聊天页面
    goToChat(userId, nickname) {
      // if (!this.$store.state.user.isLogin) {
      //   uni.showToast({
      //     title: '请先登录',
      //     icon: 'none'
      //   })
      //   uni.navigateTo({
      //     url: '/pages/login/login'
      //   })
      //   return
      // }
      uni.navigateTo({
        url: `/pages/chat/chat?userId=${userId}&nickname=${nickname}`
      })
    },
    
    // 跳转到设置页面
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/settings'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f8f8f8;
}

.nav-bar {
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.content {
  height: calc(100vh - 50px);
}

.message-list {
  padding: 10px;
}

.message-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.avatar {
  width: 50px;
  height: 50px;
  // border-radius: 100%;
  overflow: hidden;
  margin-right: 15px;
  position: relative;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.unread-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background-color: #FF4500;
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.nickname {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time {
  font-size: 12px;
  color: #999;
}

.message-text {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-status {
  width: 10px;
  height: 10px;
  background-color: #4CD964;
  border-radius: 50%;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}

.empty-text {
  margin-top: 15px;
  font-size: 14px;
}
</style>
